<template>
    <view class="content">
        <div class="lr-warp">
            <image src="../../static/images/login.png" class="logo"></image>
            <div class="lr-list">
                <div class="lr-item">
                    <image src="../../static/images/f_phone.png" class="icon"></image>
                    <input type="text" v-model="submit_data.mobile" placeholder="请输入手机号" />
                </div>
                <div class="lr-item">
                    <image src="../../static/images/f_lock.png" class="icon"></image>
                    <input type="number" value="" v-model="submit_data.code" placeholder="请输入验证码" />
                    <a class="getCode" @tap="getCode()">{{codeText}}</a>
                </div>
                <div class="lr-item">
                    <image src="../../static/images/f_lock.png" class="icon"></image>
                    <input type="password" value="" v-model="submit_data.password" placeholder="请输入密码" />
                </div>
                <div class="lr-item">
                    <image src="../../static/images/f_lock.png" class="icon"></image>
                    <input type="password" v-model="submit_data.password1" value="" placeholder="请确认密码" />
                </div>
            </div>
            <div class="agree">
                <image src="../../static/images/checkbox.png" mode="scaleToFill" v-if="!checkbox" @tap="handleChenck"></image>
                <image src="../../static/images/checkbox_active.png" mode="scaleToFill" v-if="checkbox" @tap="handleChenck"></image>
                <span>同意</span><a @tap="handleAgree">《娱客商家协议》</a>
            </div>
            <button class="lr-btn" @tap="submitData">注册并登录</button>
            <div class="oper-warp">
                <span>已有账号？</span><a @tap="Jump('../login/index')">直接登录</a>
            </div>
        </div>
        <div class="agree-fiexd-warp">
            <div class="theme-popover-mask" v-if="isAgree" @tap="isAgree = false"></div>
            <div :class="isAgree ? 'agree-fiexd active' : 'agree-fiexd'">
                <div class="agree-title">娱客商家协议</div>
                <scroll-view scroll-y="true" class="scroll-Y">
                    <div class="scroll-content">
                        <p>{{agreementInfo}}</p>
                    </div>
                </scroll-view>
                <div class="close-box">
                    <p></p>
                    <image src="../../static/images/close.png" mode="scaleToFill" @tap="isAgree = false"></image>
                </div>
            </div>
        </div>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                checkbox: false,
                isAgree: false,
                agreementInfo: '娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议娱客商家协议',
                submit_data:{
                    mobile:'',
                    code:'',
                    password : '',
                    password1: ''
                },
                codeText : '获取验证码'
            }
        },
        onLoad(e) {},
        methods: {
            handleChenck() {
                this.checkbox = !this.checkbox;
            },
            handleAgree() {
                this.isAgree = true;
            },
            //获取验证码
			getCode() {
				let t = this;
				if (!this.submit_data.mobile) {
					this.util.uToast({
						tit: '请输入手机号码'
					});
					return false;
				}
				if(t.codeText == '重新发送' || t.codeText == '获取验证码'){
					let timeNumber = 60;
					let timeInter = setInterval(() => {
						timeNumber--;
						if (timeNumber == 0) {
							clearInterval(timeInter);
							t.codeText = '重新发送';
							return false;
						}
						t.codeText = timeNumber + "s后重新发送";
					}, 1000);
				}else{
					return false;
				}
				let param = {};
				param.is_loading = true;
				param.url = "api/shop/login/send_check_num";
				param.data = {};
				param.data.shop_num = this.submit_data.mobile;
				this.util.requests(param, res => {
					this.util.uToast({
						tit: '短信发送成功'
					});
				});
			},
            submitData : function(){
                let t = this;
                if (!this.submit_data.mobile) {
                	this.util.uToast({
                		tit: '请输入手机号码'
                	});
                	return false;
                }
                if (!this.submit_data.code) {
                	this.util.uToast({
                		tit: '请输入短信验证码'
                	});
                	return false;
                }
                if (!this.submit_data.password) {
                	this.util.uToast({
                		tit: '请输入登录密码'
                	});
                	return false;
                }
                if (this.submit_data.password != this.submit_data.password1) {
                	this.util.uToast({
                		tit: '两次密码输入不一致'
                	});
                	return false;
                }
                if( this.checkbox == false ) {
                    this.util.uToast({
                    	tit: '请勾选娱客商家协议'
                    });
                    return false;
                }
                let param = {};
                param.is_loading = true;
                param.url = "api/shop/login/register";
                param.data = {};
                param.data.shop_num = this.submit_data.mobile;
                param.data.number = this.submit_data.code;
                param.data.shop_pass = this.submit_data.password;
                this.util.requests(param, res => {
                    if(res.data.code == 1) {
                        uni.showModal({
                            title: '提示',
                            showCancel: false,
                            content: '商家注册成功',
                            success: function(res) {
                                if (res.confirm) {
                                    uni.navigateTo({
                                        url: '../login/index'
                                    })
                                }
                            }
                        })
                    }
                });
            },
            Jump(url) {
                uni.navigateTo({
                    url: url
                })
            },
        },
    }
</script>
<style>
    page {
        background: linear-gradient(to bottom, #f920fc 0%, #7f00ff 100%);
    }

    .close-box {
        position: absolute;
        bottom: -140upx;
        left: 50%;
    }

    .close-box p {
        width: 1upx;
        height: 130upx;
        background: #fff;
    }

    .close-box image {
        width: 59upx;
        height: 59upx;
        margin-left: -30upx;
    }

    .theme-popover-mask {
        z-index: 999;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.75;
        background-size: 100% 100%;
        display: block;
    }

    .agree-fiexd-warp {}

    .agree-fiexd {
        position: fixed;
        background: #FFFFFF;
        height: 700upx;
        width: 80%;
        z-index: 10000;
        border-radius: 15upx;
        left: 10%;
        top: -100%;
        transition: 0.65s;
    }

    .agree-fiexd.active {
        bottom: 0;
        margin-top: -400rpx;
        transition: 0.65s;
        top: 50%;
    }

    .agree-fiexd .agree-title {
        height: 80upx;
        line-height: 80upx;
        padding: 0 30upx;
        text-align: center;
        font-size: 32upx;
        border-bottom: 1upx solid #e6e6e6;
    }

    .agree-fiexd .scroll-content {
        margin: 0 30upx;
    }


    .agree-fiexd .scroll-Y {
        margin-top: 20upx;
        height: 580upx;
    }

    .content {
        padding-bottom: 1upx;
    }

    .logo {
        width: 91upx;
        height: 80upx;
        display: block;
        margin: 0 auto;
    }

    .lr-warp {
        background: #2d2d2d;
        margin: 60upx 30upx 20upx 30upx;
        border-radius: 15upx;
        padding: 40upx;
        position: relative;
        z-index: 100;
    }

    .lr-list {
        margin: 80upx 0 100upx 0;
    }

    .lr-list .icon {
        width: 34upx;
        height: 34upx;
    }

    .lr-list .lr-item {
        padding: 20upx 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1upx solid #ffffff;
        margin-bottom: 60upx;
    }

    .lr-list .lr-item .getCode {
        color: #fc21fc;
        font-size: 28upx;
        padding: 10upx 15upx;
        border: 1upx solid #fc21fc;
        border-radius: 6upx;
    }

    .lr-list .lr-item input {
        flex: 1;
        font-size: 28upx;
        color: #fff;
        margin: 0 20upx 0 70upx;
    }

    .lr-btn {
        height: 70upx;
        line-height: 70upx;
        color: #fff;
        font-size: 32upx;
        text-align: center;
        border-radius: 100upx;
        margin-bottom: 50upx;
        background: #fb21fc;
    }

    .oper-warp {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .oper-warp span {
        font-size: 24upx;
        color: #acacac;
    }

    .oper-warp a {
        display: block;
        color: #fb21fc;
        font-size: 24upx;
    }

    .agree {
        display: flex;
        align-items: center;
        margin: -50upx 0 80upx 0;
    }

    .agree image {
        width: 28upx;
        height: 28upx;
        margin-right: 15upx;
    }

    .agree span {
        color: #fff;
        font-size: 24upx;
    }

    .agree a {
        color: #fb21fc;
        font-size: 24upx;
    }
</style>
